<template>
  <div>
    <a-layout>
      <a-layout-header>
        <!-- 移动端 -->
        <a-row
          type="flex"
          :style="
            GetIspc ? 'width:100%;margin:0 auto' : 'width:100%;margin:0 auto'
          "
          v-if="GetIspc"
        >
          <!-- <a-affix
            :style="{
              position: 'fixed',
              top: '10px',
              left: '10px',
              'z-index': '10000',
            }"
          >
            <a-button @click="showDrawer">
              <a-icon type="menu-unfold"></a-icon>
            </a-button>
          </a-affix> -->

          <!-- <a-drawer
            placement="right"
            :closable="false"
            :visible="visible"
            :get-container="false"
            @close="onClose"
          >
            <a-menu
              :default-selected-keys="['1']"
              :default-open-keys="['sub1']"
              mode="inline"
              theme="dark"
              class="fcl"
              style="height: 100%;background:#fff;color:#000"
            >
             <a-menu-item key="link1">
                <a
                  href="https://antdv.com"
                  target="_blank"
                  rel="noopener noreferrer"
                   class="fcl"
                  >link1</a
                >
              </a-menu-item>
              <a-menu-item key="link2">
                <a
                  href="https://antdv.com"
                  target="_blank"
                  rel="noopener noreferrer"
                   class="fcl"
                  >link2</a
                >
              </a-menu-item>
              <a-menu-item key="link3">
                <a
                  href="https://antdv.com"
                  target="_blank"
                  rel="noopener noreferrer"
                   class="fcl"
                  >link3</a
                >
              </a-menu-item>
            </a-menu>
          </a-drawer> -->
        </a-row>
        <!-- pc -->
        <a-row
          type="flex"
          :style="
            GetIspc ? 'width:100%;margin:0 auto' : 'width:80%;margin:0 auto'
          "
          v-if="!GetIspc"
        >
          <a-col :span="24">
            <a-menu mode="horizontal">
              <!-- <a-menu-item key="link1">
                <a
                  href="https://antdv.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  >link1</a
                >
              </a-menu-item>
              <a-menu-item key="link2">
                <a
                  href="https://antdv.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  >link2</a
                >
              </a-menu-item>
              <a-menu-item key="link3">
                <a
                  href="https://antdv.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  >link3</a
                >
              </a-menu-item> -->
            </a-menu>
          </a-col>
        </a-row>
      </a-layout-header>
    </a-layout>
  </div>
</template> 

<script>
// import { nextTick } from 'vue/types/umd';
export default {
  name: "Head",
  data() {
    return {
      selectnavs: 0,
      visible: false,
    };
  },
  watch: {
    $route(to) {
      this.selectnavs =
        to.name == "BookSearch"
          ? 0
          : to.name == "PaperbookSearch"
          ? 1
          : to.name == "EbookSearch"
          ? 2
           : to.name == "NewEbookSearch"
           ? 5
          : 3;
      this.$store.state.Namedparent.key = this.selectnavs;
      this.$store.state.Namedparent.name =
        to.name == "BookSearch"
          ? "Unified"
          : to.name == "PaperbookSearch"
          ? "Paperbook"
          : to.name == "EbookSearch"
          ? "ebook"
           : to.name == "NewEbookSearch"
          ? "NewEbook"
          : "qikan";
    },
  },
  mounted() {
    var that = this;
    that.selectnavs =
      this.$route.name == "BookSearch"
        ? 0
        : this.$route.name == "PaperbookSearch"
        ? 1
        : this.$route.name == "EbookSearch"
        ? 2
         : this.$route.name == "NewEbookSearch"
         ? 5
        : 3;
        console.log( that.selectnavs)
        console.log('----')
        console.log(this.$route.name)
        console.log('----')
    this.$store.state.Namedparent.key = that.selectnavs;
    this.$store.state.Namedparent.name =
      this.$route.name == "BookSearch"
        ? "Unified"
        : this.$route.name == "PaperbookSearch"
        ? "Paperbook"
        : this.$route.name == "EbookSearch"
        ? "ebook"
         : this.$route.name == "NewEbookSearch"
         ? "NewEbook"
        : "qikan";
  },
  computed: {
    // 判断设备
    GetIspc() {
      return navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
    },
  },
  methods: {
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
  },
};
</script>

<style scoped>
.head {
  display: flex;
}
.head span {
  padding: 0 20px;
  color: hsla(0, 0%, 100%, 0.65);
}
.head span:hover {
  cursor: pointer;
}
/deep/.nav-link {
  color: #fff !important;
}
/deep/.ant-layout-header {
  line-height: 38px;
}
/deep/.ant-menu {
  background: #000;
  color: #fff;
  border: none;
  height: 64px;
  line-height: 64px;
}
/deep/.ant-menu-horizontal > .ant-menu-item > a {
  color: #fff;
}
/deep/.ant-menu-item a:hover {
  color: rgb(183, 198, 218);
}
.fcl{
  color: #000 !important;;
}
</style>
